<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='后台管理 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="sidebar-mini skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::admin-main-header">
            </header>
            <aside class="main-sidebar" th:include="home/layout::admin-main-sidebar"></aside>
            <!-- Full Width Column -->
            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        栏目列表
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li><a href="#">Examples</a></li>
                        <li class="active">Blank page</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content" id="category-app">
                    <button type="button" class="btn btn-block btn-default btn-xs" id="addCategory">添加一个栏目</button>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <div class="box-body table-responsive no-padding">
                                    <table class="table table-hover">
                                        <tbody>
                                            <tr>
                                                <th>ID</th>
                                                <th>栏目名</th>
                                                <th>常量值</th>
                                                <th>Status</th>
                                                <th>排序</th>
                                                <th>操作</th>
                                            </tr>
                                            <tr v-for="item in items">
                                                <td>{{item.id}}</td>
                                                <td>{{item.title}}</td>
                                                <td>{{item.var}}</td>
                                                <td>
                                                    <span v-if="item.status == true" class="label label-success">正常</span>
                                                    <span v-if="item.status == false" class="label label-danger">禁用</span>
                                                </td>
                                                <td>{{item.sort}}</td>
                                                <td>
                                                    <a href="javascript:;" title="编辑" @click="edit(item.id)">
                                                        <i class="fa fa-fw fa-edit"></i>
                                                    </a>
                                                    <a href="javascript:;" @click="deleteItemConfirm(item.id)" title="删除">
                                                        <i class="fa fa-fw fa-trash-o"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->
                        </div>
                    </div>
                    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <div class="box box-info">
                                        <div class="box-header with-border">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                            <h3 class="box-title">{{form.title}}</h3>
                                        </div>
                                        <!-- /.box-header -->
                                        <!-- form start -->
                                        <form class="form-horizontal">
                                            <div class="box-body">
                                                <div class="form-group">
                                                    <label for="var" class="col-sm-2 control-label">栏目变量</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="form.field.var" class="form-control" id="var" placeholder="栏目变量">
                                                        <template v-if="form.error.var"><span class="text-danger" >{{form.error.var}}</span></template>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="title" class="col-sm-2 control-label">栏目标题</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="form.field.title" class="form-control" id="title" placeholder="栏目标题">
                                                        <template v-if="form.error.title"><span class="text-danger" >{{form.error.title}}</span></template>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sort" class="col-sm-2 control-label">排序</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" v-model="form.field.sort" class="form-control" id="sort" placeholder="排序">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="title" class="col-sm-2 control-label">开启状态</label>
                                                    <div class="col-sm-10 checkbox">
                                                        <label><input type="checkbox" v-model="form.field.status"></label>
                                                        <template v-if="form.error.status"><span class="text-danger" >{{form.error.status}}</span></template>
                                                    </div>
                                                </div>
                                                <input type="hidden" v-model="form.field.id" />
                                            </div>
                                            <!-- /.box-body -->
                                            <div class="box-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-info pull-right" @click="submitForm()">提交</button>
                                            </div>
                                            <!-- /.box-footer -->
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <th:block th:include="home/layout::modal" />
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />

        <script>
            var categoryApp = new Vue({
                el:'#category-app',
                data () {
                    return {
                        form:{
                            field:{
                                id:"",
                                var:"",
                                title:"",
                                status:true,
                                sort:""
                            },
                            error:{
                                var:"",
                                title:"",
                            },
                            title:''
                        },
                        items:'',
                        categoryId:'',
                        //模态弹出框相关的数据
                        dialogTitle:'',
                        dialogContent:'',
                        isSuccess:'',
                        hasError:''
                    }
                },
                created() {
                    this.getData();
                },
                methods:{
                    getData() {
                        var _this = this;

                        $.post('/admin/getCategoryList',null,function(response) {
                            _this.items = response;
                        },'json',_this);
                    },
                    submitForm() {
                        var _this = this;
                        if (!_this.form.field.var) {
                            _this.form.error.var = '常量不能为空';
                            return false;
                        } else {
                            _this.form.error.var = '';
                        }
                        if (_this.form.field.var.length > 15) {
                            _this.form.error.var = '常量值长度不能大于15';
                            return false;
                        } else {
                            _this.form.error.var = '';
                        }
                        if (!_this.form.field.title) {
                            _this.form.error.title = '栏目名称不能为空';
                            return false;
                        } else {
                            _this.form.error.title = '';
                        }
                        if (_this.form.field.title.length > 4) {
                            _this.form.error.title = '栏目名称长度不能超过4个';
                            return false;
                        } else {
                            _this.form.error.title = '';
                        }
                        $.post('/admin/saveCategory',this.form.field,function(response) {
                            if (_this.form.field.id) {
                                _this.dialogTitle = "修改栏目";
                            } else {
                                _this.dialogTitle = "添加栏目";
                            }
                            if (response.varStatus === false) {
                                _this.isSuccess = false;
                                _this.hasError = true;
                                _this.dialogContent = response.msg;
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                                return false;
                            }
                            if (response.status === true) {
                                _this.hasError = false;
                                _this.isSuccess = true;
                                _this.dialogContent = response.msg;
                                $('#addCategoryModal').modal('hide');
                                $('#dialogTip').modal({
                                    keyboard: true
                                });
                                _this.getData();
                            } else {
                                _this.isSuccess = false;
                                _this.hasError = true;
                                _this.dialogContent = response.msg;
                                $('#dialogTip').modal({
                                    keyboard: true
                                })
                                return false;
                            }

                        },'json',_this);

                    },

                    deleteItemConfirm(id) {
                        var _this = this;
                        _this.dialogContent = '您确定要删除该条栏目吗？';
                        $('#dialogConfirm').modal('show');
                        _this.categoryId = id;
                    },

                    edit(id) {
                        this.form.error = {var:'',title:''};
                        this.form.title = '修改栏目';
                        this.getCategory(id);
                        $('#addCategoryModal').modal({
                            keyboard: true
                        })
                    },

                    getCategory(id) {
                        var _this = this;
                        $.post('/admin/getCategory',{id:id},function(response) {
                            _this.form.field = response
                        },'json',_this);
                    }
                },
            });
            $('#addCategory').on('click',function () {
                categoryApp.form.field = {status:true};
                categoryApp.form.error = {var:'',title:''};
                categoryApp.form.title = '添加栏目';
                $('#addCategoryModal').modal({
                    keyboard: true
                })
            });
            $('#dialogConfirm .confirm').on('click',function(){
                $.post('/admin/deleteCategory',{id:categoryApp.categoryId},function(response) {
                    categoryApp.dialogTitle = "删除栏目";
                    if (response.status) {
                        $('#dialogConfirm').modal('hide');
                        categoryApp.getData();
                    }

                },'json');
            });
        </script>
    </body>
</html>
